import React from 'react';
//密码登录组件
// 引入验证码组件
import IdentifyinCode from '../../component/identifyinCode';
import { Button, Form, Input,Space,message } from 'antd';
// 引入图标组件
import { LockOutlined, UserOutlined,KeyOutlined } from '@ant-design/icons';
// 引入状态hook
import {useState} from 'react'
//导入密码登录接口
import {pwdlogin} from '@/api/login'
// 导入两个hook来操作redux
// useSelector获取数据，useDispatch用来 调用reducer方法
import {useSelector,useDispatch} from 'react-redux'
// 导入路由相关的hook
import {useHistory} from 'react-router-dom'
// 导入hook：useref，实现子传父
import {useRef} from 'react'
const PwdLogin = () => {
    const dispatch = useDispatch()
    // const sel = useSelector()
    const history = useHistory()//相当于类组件中的this.props.his
    // 创建ref对象
    const ref1= useRef()
    const [key, setkey] = useState('');
    //获取form表单实例
    const [form] = Form.useForm();
    
    // 提交表单且数据验证成功后回调事件
    const onFinish = (values) => {
        // 将key 属性添加到 values 对象中
        values.key = key
        console.log('提交的数据:', values);
        // 调用登录接口
        pwdlogin(values).then(res=>{
            console.log('密码登录信息',res);
        // 1\可以在该位置将jwt 存到本地。也可在响应拦截器中把jwt存到本地

        // 2\把acl当前用户菜单项存到redux中
        if(res.data.errNo==0){
            // 登录成功
            dispatch({type:'updateAcl',payload:res.data.context.acl})
            // console.log('acl当前用户菜单项',sel);
            // 3\提示登录成功
            message.success('登录成功',1,()=>{
                 // 4\跳转到首页
            history.push('/dashboard')
            })
        }else{
            // 登录失败：自动重新更新验证码，无需手动刷新，并且清空输入框上次输入的内容
            console.log('登录失败！');
            ref1.current.Refresh()//调用验证码组件传递的刷新验证码的方法 
            // 清空输入框上次输入的内容
            message.error('登录失败！',1,()=>{
                form.setFieldsValue({
                    username:'',
                    password:'',
                    captcha:''
                })
            })
        }

        })
        };
      // 登录验证失败执行的函数
        const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
        };
      // 定义一个 savekey函数 ,用来接收子传父的key
        const saveKey = (key)=>{
        setkey(key)
        }
    return (
        <Form
        form={form}
        name="basic"
        wrapperCol={{
        span: 24,
        }}
        initialValues={{
            remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        size='large'
        >
        <Form.Item
            name="username"
            rules={[
            {
                required: true,
                message: '请输入用户名!',
            },
            ]}
        >
            <Input placeholder='用户名' prefix={<UserOutlined className="site-form-item-icon" />}/>
        </Form.Item>

        <Form.Item
        
            name="password"
            rules={[
            {
                required: true,
                message: '请输入密码!',
            },
            ]}
        >  
            <Input.Password placeholder='密码'  prefix={<LockOutlined className="site-form-item-icon" />}/>
        </Form.Item>
        <Space>
        <Form.Item
            name="captcha"
            rules={[
            {
                required: true,
                message: '请输入验证码!',
            },
            ]}
        >
            <Input placeholder='图形验证码' prefix={<KeyOutlined className="site-form-item-icon" />}/>
        </Form.Item>  
        <Form.Item>
            {/* 验证码组件 */}
            <IdentifyinCode ref={ref1} saveKey={saveKey} height={38}></IdentifyinCode>
        </Form.Item>      
                
            

        
        </Space>
        
        <Form.Item
            wrapperCol={{
            span: 24,
            }}
        >
            <Button type="primary" htmlType="submit" color='green' block>
            登录
            </Button>
        </Form.Item>
        </Form>
    );
}

export default PwdLogin;
